<template>
  <div class="p-4">
    <BasicTable
      title="基础示例"
      title-help-message="温馨提示"
      show-table-setting
      :can-resize="canResize"
      :loading="loading"
      :columns="columns"
      :data-source="dataSource"
    >
      <template #toolbar>
        <a-button type="primary" @click="toggleCanResize">
          {{ !canResize ? '自适应高度' : '取消自适应' }}
        </a-button>
        <a-button @click="toggleLoading">开启loading</a-button>
      </template>
    </BasicTable>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { BasicTable } from '/@/components/Table';
  import { getBasicColumns, getBasicData } from './tableData';

  const canResize = ref(false);
  function toggleCanResize() {
    canResize.value = !canResize.value;
  }

  const loading = ref(false);
  function toggleLoading() {
    loading.value = true;
    setTimeout(() => (loading.value = false), 3000);
  }

  const columns = getBasicColumns();
  const dataSource = getBasicData();
</script>

<style></style>
